import {ColorPick} from '../ColorPick'
import { ButtonSelect } from '../ButttonSelect.tsx'

interface Text2dAttrs{ 
    color: string 
    fontSize: number 
    fontFamily: string 
    onChange: (color:string , fontFamily:string, fontSize:number)=> any
}
export const defText = { 
    color :'#000000',
    fontSize: 16,
    fontFamily: '楷体',
}

const fontfamilyList = [{ label:'楷',value:'楷体' },{label:'宋', value:'宋体'},{label:'常', value:'fangsong' }];
const fontSizeList = [{ label:'大',value:'32' },{label:'中', value:'18'},{label:'小', value:'12' }];

const text2d = { 
    fontFamily: 'normal',
    fontSize: 14,
    color: '#000'
}
// 这里必须是受控组件  看来我犹豫的就是 要不要搞成这样
export const TextPanel = ( {color,fontSize,fontFamily,onChange}: Text2dAttrs)=> { 
        function updateColor(  v:string ) {
            text2d.color = v ;
            onChange(text2d.color, text2d.fontFamily, text2d.fontSize);
        }

        function selectFontsize(size:number) {
         text2d.fontSize = size ;   
         onChange(text2d.color, text2d.fontFamily, text2d.fontSize);
        }

        function selectFontFamily(v:string) {
            text2d.fontFamily = v ;
            onChange(text2d.color, text2d.fontFamily, text2d.fontSize);

        }

   

    return  <div className="panel-wraper">
        <div className="attr-title">颜色</div>
        <ColorPick onChange={updateColor} color={color} ></ColorPick>
        <div className="attr-title">字体</div>
        <ButtonSelect groups={fontfamilyList } defaultValue={0}  onChange={selectFontFamily}></ButtonSelect>
        <div className="attr-title">字号</div>
        <ButtonSelect groups={fontSizeList }  defaultValue={0} onChange={selectFontsize}></ButtonSelect>
        
    </div>

}